<template>
	<scroll-view v-if="seasonItems.length > 0" enable-back-to-top scroll-y class="jigsaw">
		<view class="title">【Sky·光遇】拼卡</view>
		<!-- 表单开始 -->
		<form @submit="formSubmit">
			<!-- 所在服务器 -->
			<view class="jigsaw-item">
				<view class="jigsaw-title">
					1、您所在的服务器
				</view>
				<view class="jigsaw-content">
					<radio-group name="server">
						<label class="jigsaw-radio" v-for="(item, index) in serverItems" :key="index">
							<view
								><radio :value="item.value" :checked="index === serverCurrent" />{{
									item.name
								}}</view
							>
						</label>
					</radio-group>
				</view>
			</view>

			<!-- 拼卡的季节 -->
			<view class="jigsaw-item">
				<view class="jigsaw-title">
					2、您想在哪个季节拼卡
				</view>
				<view class="jigsaw-content">
					<radio-group name="season">
						<label class="jigsaw-radio" v-for="(item, index) in seasonItems" :key="index">
							<view
								><radio :value="item.value" :checked="index === seasonCurrent" />{{
									item.name
								}}</view
							>
						</label>
					</radio-group>
				</view>
			</view>

			<!-- 拼卡状态 -->
			<view class="jigsaw-item">
				<view class="jigsaw-title">
					3、您目前的拼卡状况
				</view>
				<view class="jigsaw-content">
					<radio-group name="pinkaState" @change="handlerSeasonChange">
						<label class="jigsaw-radio" v-for="(item, index) in pinkaStatusItems" :key="index">
							<view
								><radio :value="item.value" :checked="index === pinkaCurrent" />{{
									item.name
								}}</view
							>
						</label>
					</radio-group>
					<view class="card-num" v-if="pinkaIndex !== '2'">
						<view class="card-title">数量</view>
						<input
							@blur="handlerNumInput"
							auto-blur
							v-model="cardNum"
							class="numInput"
							type="number"
							adjust-position
						/>
					</view>
				</view>
			</view>

			<!-- 是否未成年 -->
			<view class="jigsaw-item">
				<view class="jigsaw-title">
					4、您是否已成年
				</view>
				<view class="jigsaw-content">
					<radio-group name="adult">
						<label class="jigsaw-radio"
							><view><radio value="是" checked="true" />是</view></label
						>
						<label class="jigsaw-radio"
							><view><radio value="否" />否</view></label
						>
					</radio-group>
				</view>
			</view>

			<!-- 游戏内名称 -->
			<view class="jigsaw-item">
				<view class="jigsaw-title">
					5、您在游戏内的称呼
				</view>
				<view class="jigsaw-content">
					<input class="nickNameInput" name="gameNickName" type="text" adjust-position />
				</view>
			</view>
			<!-- 联系方式 -->
			<view class="jigsaw-item">
				<view class="jigsaw-title">
					6、您的联系方式(为方便联系,请务必填至少一项!)
				</view>
				<view class="jigsaw-content">
					<view class="jigsaw-contact">
						<view class="inner-title">QQ</view>
						<input class="contentInput" name="qq" type="number" adjust-position />
					</view>
					<view class="jigsaw-contact">
						<view class="inner-title">微信</view>
						<input class="contentInput" name="wechat" type="text" adjust-position />
					</view>
					<view class="jigsaw-contact">
						<view class="inner-title">手机</view>
						<input class="contentInput" name="phone" type="number" adjust-position />
					</view>
				</view>
			</view>

			<!-- 提交按钮 -->
			<view class="submitBtn">
				<button type="primary" form-type="submit">提交</button>
			</view>
		</form>
	</scroll-view>
</template>

<script>
	import { mapState } from 'vuex'
	export default {
		data() {
			return {
				// 拼卡的季节
				seasonItems: [],
				seasonCurrent: 0,
				// 拼卡状态
				pinkaStatusItems: [
					{ name: '拼卡', value: '0' },
					{ name: '卖卡', value: '1' },
					{ name: '互卡', value: '2' },
				],
				pinkaCurrent: 0,
				pinkaIndex: 0,
				// 所在服务器
				serverItems: [
					{
						value: 'Android',
						name: '安卓(Android)',
					},
					{
						value: 'iOS',
						name: '苹果(iOS)',
					},
					{
						value: 'international',
						name: '国际服',
					},
				],
				serverCurrent: 0,
				// 拼卡数量提示
				cardNum: 1,
			}
		},
		computed: {
			...mapState(['userInfo']),
		},
		onLoad() {
			// 判断是否登录
			if (!this.userInfo._openid) {
				uni.showModal({
					content: '当前未登录,请先登录!',
					showCancel: false,
					success: function(res) {
						uni.navigateBack()
					},
				})
				return
			}

			// 获取季节列表
			this.getSeasonList()
		},
		methods: {
			// 监听数量输入框失去焦点事件
			handlerNumInput() {
				let re = /^[1-9]+\d*$/
				if (!re.test(this.cardNum)) {
					uni.showModal({
						content: '输入错误',
						showCancel: false,
						success: (res) => {
							this.cardNum = 1
						},
					})
				}
			},
			// 获取季节列表
			getSeasonList() {
				this.$http({
					name: 'get_seasonList',
				}).then((res) => {
					this.seasonItems = res
				})
			},
			// 监听拼卡状态改变事件
			handlerSeasonChange(e) {
				this.cardNum = 1
				this.pinkaIndex = e.detail.value
			},
			// 提交表单
			formSubmit(e) {
				let userForm = e.detail.value
				// 需要买卡或者卖卡的数量
				userForm.cardNum = parseInt(this.cardNum)

				// 更新用户数据
				this.$http({
					name: 'update_sky_user_info',
					data: userForm,
				}).then((res) => {
					this.$http({
						name: 'get_user_info_byid',
					}).then((res) => {
						this.$store.dispatch('setUserInfo', res[0])
					})
				})

				// 如果查询到了结果则返回
				this.$http({
					name: 'query_sky_user',
					data: userForm,
				}).then((res) => {
					if (res.code === '200') {
						this.$store.dispatch('setResultInfo', res.data)
						// 跳转到结果展示页面
						uni.navigateTo({
							url: '/pages/result/result',
						})
					} else {
						uni.showModal({
							title: '查询结果',
							content:
								'未查询到符合的用户,已将您的匹配状态修改为"匹配中",您也可以在个人页面手动修改!',
							showCancel: false,
							success: (res) => {
								uni.reLaunch()
							},
						})
					}
				})
			},
		},
	}
</script>
<style lang="scss" scoped>
	.jigsaw {
		.title {
			text-align: center;
			font-size: 50rpx;
			font-weight: 600;
			height: 80rpx;
			line-height: 80rpx;
			margin-top: 20rpx;
		}
		.jigsaw-item {
			margin: 30rpx 20rpx;
			background-color: #fff;
			padding: 20rpx;
			border-radius: 15rpx;
			.jigsaw-title {
				font-weight: 500;
				font-size: 35rpx;
			}
			.jigsaw-content {
				font-size: 30rpx;
				.jigsaw-radio {
					margin: 10rpx;
				}
				.jigsaw-contact {
					display: flex;
					margin: 30rpx 0;
					.inner-title {
						width: 20%;
						height: 80rpx;
						line-height: 80rpx;
						text-align: center;
					}
					.contentInput {
						border: 1px solid #ccc;
						width: 80%;
						height: 80rpx;
						border-radius: 15rpx;
						padding-left: 30rpx;
						box-sizing: border-box;
						margin-right: 30rpx;
					}
				}
				.nickNameInput {
					border: 1px solid #ccc;
					border-radius: 15rpx;
					width: 100%;
					height: 80rpx;
					padding-left: 30rpx;
					margin: 20rpx 0;
					box-sizing: border-box;
				}
				.card-num {
					display: flex;
					text-align: center;
					height: 80rpx;
					line-height: 80rpx;
					margin-bottom: 20rpx;
					.card-title {
						margin-right: 50rpx;
					}

					.numInput {
						border: 1px solid #ccc;
						width: 120rpx;
						height: 80rpx;
						margin-left: -1px;
						border-radius: 15rpx;
					}
				}
			}
		}
		.submitBtn {
			display: flex;
			justify-content: center;
			button {
				width: 100%;
				margin: 30rpx 20rpx;
			}
		}
	}
</style>
